@define BACKGROUND_COLOR: #000000;


#EndScreenVictoryLeft
{
    font-weight: semi-bold;
    color: #ffef3a;
    font-size: 90px;
    vertical-align: bottom;
}

#EndScreenVictoryRight
{
    color: #dedee3;
    font-size: 50px;
    vertical-align: bottom;
}


#TopCloseButton {
    width: 24px;
    height: 24px;
    background-image: url("s2r://panorama/images/control_icons/x_close_png.vtex");
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin: 10px;
    horizontal-align: right;
}

#EndScreenRoot
{
    width: 100%;
    height: 100%;
    background-color: gradient( linear, 0% 0%, 0% 100%, from( #000000FF ), color-stop( 0.12, #000000ff ), color-stop( 0.5, #00000022 ), to( #00000000 ) );
    visibility: collapse;
}


.EndScreenAnim{
    animation-name: EndScreenAnim;
    animation-duration: .5s;
    animation-timing-function: linear;
}


@keyframes 'EndScreenAnim'
{
    0%
    {
        opacity: 0;
        transform: scaleX(0) scaleY(0) translatey(-50px);
    }

    100%
    {
        opacity: 1;
        transform: scaleX(1) scaleY(1);
    }
}

#VictoryRow
{
    vertical-align: center;
    flow-children: right;
    horizontal-align: right;
    margin-right: 8px;
    padding-bottom: 15px;
}



.VictoryRowAnim{
    animation-name: VictoryRowAnim;
    animation-duration: 1.5s;
    animation-timing-function: linear;
}


@keyframes 'VictoryRowAnim'
{
    0%
    {
        opacity: 0;
        transform: scaleX(0) scaleY(0) translatey(-50px);
    }

    100%
    {
        opacity: 1;
        transform: scaleX(1) scaleY(1);
    }
}



#WinningTeamLogo
{
    vertical-align: center;
    margin-right: 16px;
}

#VictoryRow
{
    font-size: 64px;
    color: #cccccc;
    vertical-align: center;
    text-transform: uppercase;
    margin-bottom: -16px;
}

.EndScreenWindow
{
    margin-top: 100px;
    text-align: center;
    flow-children: down;
    horizontal-align: center;
}



#ContinueButton,
#CloseButton
{
    background-color: #121618;
    border: 3px solid #4d5051;
    margin-top: 18px;
    horizontal-align: right;
    vertical-align: bottom;
    width: 200px;
    margin-left: 100px;
}

#ContinueButton:hover,
#CloseButton:hover
{
    border: 3px solid white;
}

#ContinueButton Label,
#CloseButton Label
{
    horizontal-align: center;
    vertical-align: center;
    color: #6f6f6f;
    text-transform: uppercase;
}

#ContinueButton:hover Label
#CloseButton:hover Label
{
    color: white;
}

.BottomMenu{
    horizontal-align: right;
    flow-children: right;
}

#TeamsContainer
{
    horizontal-align: right;
    flow-children: down;
}


.TeamInfo
{
    margin-top: 1px;
    height: 100%;
}




.TeamId
{
    flow-children: right;
}


#TeamScorePanel
{
    margin-top: 1px;
    margin-left: 306px;
    width: 79px;
    height: 100%;
    background-color: BACKGROUND_COLOR;
}





.Legend
{
    flow-children: right;
    horizontal-align: right;
    margin-right: 8px;
}

.Legend Label
{
    text-transform: uppercase;
    font-size: 15px;
    color: #90999b;
}

.PlayerRow
{
    height: 45px;
}

#PlayerRowContainer
{
    flow-children: right;
    height: 45px;
    border: 1px;
}

#HeroIcon
{
    height: 100%;
    width: 100%;
    vertical-align: middle;
    border: 1px solid black;
}
#RankingContainer,
#LevelContainer,
#KillsContainer,
#DeathsContainer,
#AssistsContainer
{
    height: 100%;
}

.ScoreboardPanel
{
    background-color: BACKGROUND_COLOR;
    margin-top: 1px;
    margin-left: 1px;
    height: 100%;
}

.LegendPanel
{
    margin-top: 1px;
    margin-left: 1px;
}

.ScoreboardPanel Label
{
    font-size: 30px;
    text-shadow: 2px 2px 2px black;
    margin-top: -2px;
}



#Level
{
    vertical-align: middle;
    horizontal-align: center;
    color: #898b8c;
}

#Rank,
#RankGradeName,
#Ranking,
#Kills,
#Deaths
{
    horizontal-align: center;
    vertical-align: center;
    text-align: center;
    font-size: 18px;
    margin-top: 3px;
}


.LocalPlayer #PlayerRowContainer{
    border: 1px solid rgb(238, 228, 85);
}
.LocalPlayer #PlayerName{
    brightness: 2.0;
}

#PlayerName
{
    font-size: 18px;
    font-weight: bold;
    margin-top: 3px;
    padding-left: 4px;
    color: #cccccc;
    white-space: nowrap;
}

#HeroNameAndDescription
{
    padding-left: 4px;
    font-size: 15px;
    text-shadow: 2px 2px 2px black;
    margin-top: 0px;
    color: #999999;
    vertical-align: bottom;
}

#PlayerDetailsContainer
{
    height: 100%;
}

#PlayerAndHeroName
{
    height: 100%;
}

#PlayerAbilitiesContainer
{
    vertical-align: center;
    horizontal-align: center;
}

#PlayerAbilitiesContainer .AlignContainer{
    flow-children: down;
    vertical-align: center;
    horizontal-align: center;
    height: 100%;
    width: 100%;
}
#PlayerAbilitiesContainer .RowContainer{
   flow-children:right;
    height:50%;
    horizontal-align: center;
}
#RankingGrade .AlignContainer{
    flow-children: right;
    vertical-align: center;
    horizontal-align: center;
}
#RankLogoContainer{
    margin-top: 6px;
    height: 26px;
    width: 26px;
    horizontal-align:center;
    vertical-align: center;

}
#RankingGrade Label{
    horizontal-align:left;
}
#EliteFX
{
    width: 100%;
    height: 100%;
    position: 3px -4px 0;
}



.ScoreCol_TeamInfo
{
    width: 80px;
}

.ScoreCol_PlayerDetails
{
    width: 170px;
}

.ScoreCol_TeamScore
{
    width: 120px;
    text-align: center;
}
.ScoreCol_RankingGrade{
    width: 100px;
    text-align: center;
    flow-children: right;
    vertical-align: center;
    horizontal-align: center;
}

.ScoreCol_Hero
{
    width: 79px;
}

.ScoreCol_Ranking
{
    width: 35px;
}

.ScoreCol_Kills,
.ScoreCol_Deaths
{
    width: 50px;
    text-align: center;
}

.ScoreCol_Abilities
{
    width: 258px;
    text-align: center;
}

.ScoreCol_Gold
{
    width: 70px;
    text-align: center;
}